<template>
  <div class="app-container">
    <el-card>
      <div class="reviewTaskView-title-outBox">
        <div class="reviewTaskView-title">评审任务/任务详情</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <!-- 设备申请明细 -->
      <div class="model-outBox">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>设备申请明细</span>
        </div>
        <el-table :data="systemInfoVoList" border class="table_technical">
          <el-table-column label="产品名称" align="center" width="400" />
          <el-table-column label="参数" align="center" />
          <el-table-column label="数量" align="center" />
          <el-table-column label="建设地点" align="center" />
          <el-table-column label="设备功能" align="center" />
          <el-table-column label="建设方式" align="center" />
        </el-table>
      </div>
      <!-- 集约化建设检测 -->
      <div class="model-outBox">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>集约化建设检测</span>
        </div>
        <div class="jy-box">
          <div class="jybox-left">
            <div class="chart-box" ref="myChart"></div>
          </div>
          <div class="jybox-right">
            <span class="jybox-right-title">设备物联比例</span>
            <el-table style="width: 100%" :data="getValues">
              <el-table-column
                v-for="(item, index) in getHeaders"
                :key="index"
                :prop="item"
                :show-header="false"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 设备地图 -->
      <div class="model-outBox">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>设备地图</span>
        </div>
        <section class="markname-box m_r15">
            <span class="block1 m_r5"></span>
            <span>申报建设设备</span>
        </section>
        <section class="markname-box m_r15">
            <span class="block2 m_r5"></span>
        <span>500米范围内重复设备</span>
        </section>
        <section class="markname-box m_r15">
            <span class="block3 m_r5"></span>
            <span>相同地点重复设备</span>
        </section>
        <el-amap ref="map" class="amap-box" :zoom="zoom" :events="events" :center="center" :mapStyle="mapStyle">
            <!-- 搜索标记 -->
            <el-amap-marker
                :content="marker.content"
                :events="marker.events"
                :icon="iconImg"
                @click="infoshow(marker)"
                v-for="(marker, i) in markers"
                :key="i"
                :position="marker.position"
            ></el-amap-marker>
        </el-amap>
      </div>
      <!-- 重复设备明细 -->
      <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>重复设备明细</span>
        </div>
        <el-table :data="systemInfoVoList" border class="table_technical">
          <el-table-column label="序号" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="产品名称" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="设备名称" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="所属项目" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="所属部门" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="设置位置" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="设备功能" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="参数" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="建设时间" align="center" :show-overflow-tooltip="true"/>
          <el-table-column label="状态" align="center" :show-overflow-tooltip="true"/>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { listThird, delTask, getTask } from "@/api/tripartiteReview/reviewTask";

import ArgumentDialog from "./components/argumentDialog";
import ViewDialog from "./components/viewDialog";
import * as echarts from "echarts";

export default {
  components: {
    ArgumentDialog,
    ViewDialog,
  },
  data() {
    return {
      spanArr: [], //用于存放每一行记录的合并数
      pos: 0,
      isShowData: {},
      // 设备申请明细
      reviewTask: {},
      // 集约化建设检测
      annualDeclarationVo: {},
      // 设备地图
      schemeDeclarations: {},
      // 重复设备明细
      systemInfoVoList: [],
      // echarts
      myChart: null,
      // 设备监测数组
      equipmentList: [
        //   {discrb: ''}
        //   {}
      ],
      headers: [
        {
          prop: "date",
          label: "设备名称",
        },
        {
          prop: "name",
          label: "数量(个)",
        },
      ],
      tableData: [
        {
          date: "水质检测仪",
          name: "3",
        },
        {
          date: "环境监测仪",
          name: "2",
        },
        {
          date: "土质检测仪",
          name: "3",
        },
      ],
      center: [121.468604, 31.675731], //地图中心点坐标
      zoom: 15, //初始化地图显示层级
      mapStyle: 'amap://styles/8b6be8ec497009e17a708205348b899a', //设置地图样式
      markers: [],
      events: {

      }
    };
  },
  computed: {
    getHeaders() {
      return this.tableData.reduce(
        (pre, cur, index) => pre.concat(`value${index}`),
        ["title"]
      );
    },
    getValues() {
      return this.headers.map((item) => {
        return this.tableData.reduce(
          (pre, cur, index) =>
            Object.assign(pre, { ["value" + index]: cur[item.prop] }),
          { title: item.label }
        );
      });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  watch: {
    approvalList(newval, oldval) {
      console.log("监听审核进程", newval, oldval);
      this.getSpanArr(newval);
    },
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      this.myChart.setOption({
        color: ["#60AACF", "#eeeeee"],
        title: {
          text: "",
        },
        legend: {
          top: 0,
          middle: "center",
          itemGap: 6,
          itemWidth: 16,
          itemHeight: 16,
          icon: "roundRect",
          selectedMode: false,
          textStyle: {
            fontSize: 12,
            color: "#4f91b9",
          },
          data: ["设备物联比例"],
        },
        series: [
          {
            name: "设备物联比例",
            type: "pie",
            radius: ["50%", "80%"],
            avoidLabelOverlap: false,
            hoverAnimation: false, //关闭放大动画
            selectedOffset: 0, //选中块的偏移量
            label: {
              show: false,
              position: "center",
              formatter: "64%",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 435,
                name: "设备物联比例1",
                selected: true, //默认选中第一块
                label: {
                  show: true, //默认显示第一块
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
              { value: 200, name: "设备物联比例" },
            ],
          },
        ],
      });
    },
    gotoMonitor() {
      this.$router.push("/tripartiteReview/reviewTask/equipmentMonitor");
    },
    /** 对表格单列样式更改 */
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        //第1列的背景色就改变
        return "background:#f8f8f9";
      }
    },
    // 合并表格
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].approvalStage === data[i - 1].approvalStage) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        // console.log("22222", `rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    /** 返回按钮操作 */
    handBack() {
      // this.$router.push({
      //   path: "/tripartiteReview/reviewTask",
      // });
      this.$router.back()
    },
    handleSure(row) {
      if (row.show == true) {
        row.show = false;
      }
    },
    /** 修改按钮操作 新增重复设备明细*/
    handleEdit(row) {
      if (row.show == false) {
        row.show = true;
      }
    },
    /** 按钮操作 查看*/
    handView() {
      this.showViewDialog = true;
    },
    /** 按钮操作 专家管理*/
    handExpert() {
      this.$router.push({
        path: "/business_manage/manage/expertsdraw/details",
        id: "",
      });
    },
    /** 按钮操作 抽取*/
    handExtract(row) {
      this.$router.push({
        path: "/business_manage/manage/projectPlan",
        query: {
          projectId: row.projectId,
          info:
            this.reviewTask.taskName +
            row.approvalStage +
            "评审." +
            row.approvalType,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.reviewTaskView-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .reviewTaskView-title {
    font-weight: 500;
    font-size: 18px;
    font-family: "PingFang SC";
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  margin-top: 24px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
.jy-box {
  width: 100%;
  height: 100%;
  position: relative;
  .jybox-left {
    display: inline-block;
    .chart-box {
      width: 400px;
      height: 200px;
    }
  }
  .jybox-right {
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 15px;
    width: calc(100% - 400px);
    height: 142px;
    .jybox-right-title {
      font-size: 16px;
      color: #000000;
      margin-bottom: 24px;
      display: inline-block;
    }
  }
}

.markname-box{
    // display: flex;
    // align-items: center;
    display: inline-block;
    .block1{
        width: 16px;
        height: 16px;
        background: #28b7d7;
        display: inline-block;
        position: relative;
        top: 2px;
    }
    .block2{
        width: 16px;
        height: 16px;
        background: #3171ee;
        display: inline-block;
        position: relative;
        top: 2px;
    }
    .block3{
        width: 16px;
        height: 16px;
        background: #df822d;
        display: inline-block;
        position: relative;
        top: 2px;
    }
}
.amap-box {
  width: 100%;
  height: 500px;
  margin-top: 24px;
}
</style>
<style lang="scss">
/*表单label不加粗  */
label {
  font-weight: normal !important;
}
/* el-descriptions-item 文字居中 */
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}
.model-outBox {
  /* 信息描述组件样式更改 */
  .descriptions-item-label {
    width: 266px;
  }
  .descriptions-item-content {
    text-align: left !important;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      position: relative;
      top: 4px;
    }
  }
  .cancel-border-top {
    border-top: 0 !important;
  }
  .cancel-border-bottom {
    border-bottom: 0 !important;
  }
  .descriptions-item-height {
    height: 108px;
  }
}
</style>
